{include file="common/header" /}
<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-md-12 offset-md-0">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">用户列表</h4>
                        <div class="card-actions">
                            <a href="#" data-bs-toggle="modal" data-bs-target="#addUserModal" class="btn btn-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
                            添加用户
                            </a>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-vcenter card-table">
                            <thead>
                              <tr>
                                <th>ID</th>
                                <th>昵称</th>
                                <th>账号</th>
                                <th>权限</th>
                                <th>角色</th>
                                <th>操作</th>
                              </tr>
                            </thead>
                            <tbody>
                                {foreach $userList as $key=>$vo } 
                                  <tr>
                                    <td class="text-secondary">
                                        {$vo.id}
                                    </td>
                                    <td class="text-secondary">
                                        {$vo.nickname}
                                    </td>
                                    <td class="text-secondary">
                                        {$vo.username}
                                    </td>
                                    <td class="text-secondary">
                                        {:getUserRole($vo.role)}
                                    </td>
                                    <td class="text-secondary">
                                        {:getUserType($vo.type)}
                                    </td>
                                    <td class="text-secondary">
                                        <span onclick="setEditModel('{$vo.id}','{$vo.nickname}','{$vo.role}','{$vo.type}')" data-bs-toggle="modal" data-bs-target="#editUserModal" class="badge bg-primary-lt">修改</span>
                                        <span onclick="setUserId('{$vo.id}')" data-bs-toggle="modal" data-bs-target="#delUserModal" class="badge bg-lt">删除</span>
                                    </td>
                                  </tr>
                                {/foreach}
                            </tbody>
                          </table>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加用户模态框 -->
  <div class="modal modal-blur fade" id="addUserModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加用户</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="mb-3">
            <label class="form-label">昵称</label>
            <div class="input-icon mb-3">
              <input id="nickname" type="text" class="form-control" placeholder="请输入昵称">
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">账号</label>
            <div class="input-icon mb-3">
              <input id="username" type="text" class="form-control" placeholder="请输入账号">
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">密码</label>
            <div class="input-icon mb-3">
              <input id="password" type="text" class="form-control" placeholder="请输入密码">
            </div>
          </div>

          <div class="mb-3">
            <div class="form-label">权限</div>
            <select id="role" class="form-select">
              <option value="1">管理员</option>
              <option value="2">审核员</option>
              <option value="3">普通员工</option>
            </select>
          </div>

          <div class="mb-3">
            <div class="form-label">角色</div>
            <select id="type" class="form-select">
              <option value="0">其他</option>
              <option value="1">固晶</option>
              <option value="2">焊线</option>
              <option value="3">测试</option>
            </select>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="addUser()">添加</button>
        </div>
      </div>
    </div>
  </div>
<!-- 添加用户模态框结束 -->

<!-- 修改用户模态框 -->
<div class="modal modal-blur fade" id="editUserModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改用户</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="mb-3">
            <label class="form-label">昵称</label>
            <div class="input-icon mb-3">
              <input id="nickname_edit" type="text" class="form-control" placeholder="请输入昵称">
            </div>
          </div>
        
          <div class="mb-3">
            <label class="form-label">密码</label>
            <div class="input-icon mb-3">
              <input id="password_edit" type="text" class="form-control" placeholder="空留则不修改">
            </div>
          </div>

          <div class="mb-3">
            <div class="form-label">权限</div>
            <select id="role_edit" class="form-select">
              <option value="1">管理员</option>
              <option value="2">审核员</option>
              <option value="3">普通员工</option>
            </select>
          </div>

          <div class="mb-3">
            <div class="form-label">角色</div>
            <select id="type_edit" class="form-select">
              <option value="0">其他</option>
              <option value="1">固晶</option>
              <option value="2">焊线</option>
              <option value="3">测试</option>
            </select>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="editUser()">修改</button>
        </div>
      </div>
    </div>
  </div>
<!-- 修改用户模态框结束 -->

  <!-- 用户删除模态框模态框 -->
  <div class="modal modal-blur fade" id="delUserModal" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-status bg-danger"></div>
        <div class="modal-body text-center py-4">
          <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mb-2 text-danger icon-lg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
          <h3>确认删除吗?</h3>
          <div class="text-secondary">您确认要删除此用户吗? 删除后将不可恢复.</div>
        </div>
        <div class="modal-footer">
          <div class="w-100">
            <div class="row">
              <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
                  取消
                </a></div>
              <div onclick="deleteUser()" class="col"><a href="#" class="btn btn-danger w-100">
                  删除
                </a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 用户删除模态框模态框结束 -->

{include file="common/footer" /}

<script>
var userId;
function setUserId(id){
    userId = id;
}

function setEditModel(id,nickname,role,type){
    setUserId(id)
    $('#nickname_edit').val(nickname)
    $('#username_edit').val(username)
    $('#role_edit').val(role)
    $('#type_edit').val(type)
}

function addUser(){
    var nickname = $('#nickname').val()
    var username = $('#username').val()
    var password = $('#password').val()
    var role = $('#role').val()
    var type = $('#type').val()
    if(nickname == '' || username == '' || password == '' || role == '' || type == ''){
        layer.msg('信息不完整')
    }

    axios.post('/index/user/add',{
        nickname:nickname,
        username:username,
        password:password,
        role:role,
        type:type
    })
    .then(function (res) {
        layer.msg(res.data.msg)
        if(res.data.code == 200){
            window.location.href = ""
        }
    })
    .catch(function (error) {
        console.log(error);
    });
}

function editUser(){
    var nickname = $('#nickname_edit').val()
    var username = $('#username_edit').val()
    var password = $('#password_edit').val()
    var role = $('#role_edit').val()
    var type = $('#type_edit').val()
    if(nickname == '' || username == '' || role == '' || type == ''){
        layer.msg('信息不完整')
    }

    axios.post('/index/user/edit',{
        id:userId,
        nickname:nickname,
        password:password,
        role:role,
        type:type
    })
    .then(function (res) {
        layer.msg(res.data.msg)
        if(res.data.code == 200){
            window.location.href = ""
        }
    })
    .catch(function (error) {
        console.log(error);
    });
}

function deleteUser(id){
    axios.post('/index/user/delete',{
        id:userId
    })
    .then(function (res) {
        layer.msg(res.data.msg)
        if(res.data.code == 200){
            window.location.href = ""
        }
    })
    .catch(function (error) {
        console.log(error);
    });
}
</script>

